import { defineComponent } from 'vue';
import {
  ElDropdown,
  ElDropdownItem,
  ElDropdownMenu,
  ElIcon,
  ElImage
} from 'element-plus';
import { websiteLink, newsLink, dynamicLink } from '../../../Enum';
import './index.less';
import News from '../News';

export default defineComponent({
  name: 'Synthesis',
  props: ['userInfo'],
  setup(props) {
    const { VITE_STATIC_URL } = import.meta.env;

    const store = useStore();
    const dingdingInfo = computed(() => store.state.dingdingInfo || {});

    const websiteSlots = {
      dropdown: () => (
        <ElDropdownMenu>
          {websiteLink.map((_item, _index) => (
            <ElDropdownItem>
              <a href={_item.link} target="_blank">
                {_item.name}
              </a>
            </ElDropdownItem>
          ))}
        </ElDropdownMenu>
      )
    };
    const newsSlots = {
      dropdown: () => (
        <ElDropdownMenu>
          {newsLink.map((_item, _index) => (
            <ElDropdownItem>
              <a href={_item.link} target="_blank">
                {_item.name}
              </a>
            </ElDropdownItem>
          ))}
        </ElDropdownMenu>
      )
    };
    const dynamicSlots = {
      dropdown: () => (
        <ElDropdownMenu>
          {dynamicLink.map((_item, _index) => (
            <ElDropdownItem>
              <a href={_item.link} target="_blank">
                {_item.name}
              </a>
            </ElDropdownItem>
          ))}
        </ElDropdownMenu>
      )
    };

    return () => (
      <>
        <div class="synthesis">
          <div class="other flex-start">
            <div class="other_item">
              <ElDropdown v-slots={websiteSlots}>
                <div>
                  <ElImage
                    src={`${VITE_STATIC_URL}/tcpl/p_website.png`}
                  ></ElImage>
                  <p style={{fontSize:"12px"}}>星卡官网</p>
                </div>
              </ElDropdown>
            </div>
            <div class="other_item">
              <ElDropdown v-slots={newsSlots}>
                <div>
                  <ElImage src={`${VITE_STATIC_URL}/tcpl/p_news.png`}></ElImage>
                  <p style={{fontSize:"12px"}}>公司新闻</p>
                </div>
              </ElDropdown>
            </div>
            <div class="other_item">
              <ElDropdown v-slots={dynamicSlots}>
                <div>
                  <ElImage
                    src={`${VITE_STATIC_URL}/tcpl/p_dynamic.png`}
                  ></ElImage>
                  <p style={{fontSize:"12px"}}>行业动态</p>
                </div>
              </ElDropdown>
            </div>

            <div class="other_item" onClick={()=>window.open("https://flbook.com.cn/c/vDueBe84MH","_blank")}>
              <ElImage src={`${VITE_STATIC_URL}/tcpl/p_journal.png`}></ElImage>
              <p>电子期刊</p>
            </div>
            <div class="other_item">
              <a
                href={`http://112.74.53.253:9527/#/index?userId=${dingdingInfo.value.ding_userid}`}
                target="_blank"
              >
                <ElImage src={`${VITE_STATIC_URL}/tcpl/p_study.png`}></ElImage>
                <p>星卡学院</p>
              </a>
            </div>
          </div>
          <div class="news_wrap">
            <News />
          </div>
        </div>
      </>
    );
  }
});
